<template>
  <div id="app" :class="{'show-aside':showAside}">
    <div class="nav">
      <div class="nav__bar">
        <button class="nav__aside-btn" @click="showAside =! showAside"><i class="fa fa-bars"></i></button>
        <span class="nav__logo" href="javascript:void(0)"><i class="fa fa-connectdevelop"></i> <b>ES</b> view</span>
        <button class="nav__menu-btn"><i class="fa fa-ellipsis-h"></i></button>
      </div>
    </div>
    <div class="aside">
      <ol class="aside-ol">
        <li class="aside-ol__item" :class="{'aside-ol__item--active': activeTab==='database'}">
          <div class="aside-ol__item-main" @click="activeTab==='database'?activeTab='':activeTab='database'">
            <i class="aside-ol__item-icon fa fa-database"></i><span class="aside-ol__item-name">DataBase</span><i class="fa aside-ol__item-arrow fa-plus"></i><i class="fa aside-ol__item-arrow fa-minus"></i>
          </div>
          <div class="aside-ol__item-children-warp">
            <ol class="aside-ol__item-children">
              <li v-for="(url,i) in dataBaseUrls" :key="'url_' + i" class="aside-ol__sub-item" @click="handelUrlCkick(url)">{{url}}</li>
            </ol>
            <button type="button" class="btn btn-default btn-xs btn-block add-database-btn" @click="handelAddDatabasUrl"><i class="fa fa-plus"></i></button>
          </div>
        </li>
        <li class="aside-ol__item" :class="{'aside-ol__item--active': activeTab==='setting'}">
          <div class="aside-ol__item-main" @click="activeTab==='setting'?activeTab='':activeTab='setting'">
            <i class="aside-ol__item-icon fa fa-cog"></i><span class="aside-ol__item-name">Setting</span><i class="fa aside-ol__item-arrow fa-plus"></i><i class="fa aside-ol__item-arrow fa-minus"></i>
          </div>
          <div class="aside-ol__item-children-warp">
            <ol class="aside-ol__item-children">
              <li class="aside-ol__sub-item">Setting-1</li>
              <li class="aside-ol__sub-item">Setting-2</li>
              <li class="aside-ol__sub-item">Setting-3</li>
              <li class="aside-ol__sub-item">Setting-4</li>
            </ol>
          </div>
        </li>
      </ol>
    </div>
    <div class="aside-mask" @click="showAside=false"></div>

    <ModalAddUrl ref="modalAddUrl" @confirm="handelAddUrlConfirm"></ModalAddUrl>
    <ModalDevHelp></ModalDevHelp>

    <router-view class="view"/>

  </div>
</template>

<script>
import localforage from 'localforage'
import ModalAddUrl from './Modal-AddUrl.vue'
import ModalDevHelp from './Modal-DevHelp.vue'

export default {
  name: 'App',
  data () {
    return {
      dataBaseUrls: [],
      showAside: true,
      activeTab: '',
      open: false
    }
  },
  methods: {
    updateDataBaseUrls () {
      return localforage.getItem('urls').then((value) => {
        var urls = value || []
        this.dataBaseUrls = urls
      })
    },
    handelAddDatabasUrl () {
      this.$refs.modalAddUrl.open()
    },
    handelAddUrlConfirm (url) {
      this.updateDataBaseUrls()
    },
    handelUrlCkick (url) {
      this.$router.push({
        name: 'dataBaseIndex',
        params: { url: url }
      })
    }
  },
  mounted () {
    this.updateDataBaseUrls().then(() => {
      if (this.dataBaseUrls.length) {
        this.$router.push({
          name: 'dataBaseIndex',
          params: { url: this.dataBaseUrls[0] }
        })
      }
    })
  },
  components: {
    ModalAddUrl: ModalAddUrl,
    ModalDevHelp: ModalDevHelp
  }
}
</script>

<style>
  .add-database-btn {
    width: 200px;
    margin: 0px auto;
  }
</style>
